@import './var.scss';
@import './normal';
html {
  height: 100%;
  box-sizing: border-box;
}
body {
  height: 100%;
  background-color: $bg_body;
}
#app {
  height: 100%;
}
/* flex布局样式 */
.flex-c-c {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-c-a {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.flex-c-b {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-c-e {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.flex-c-s {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
/* -----------文本对齐------------- */
.text-align-c {
  text-align: center;
}
.text-align-l {
  text-align: left;
}
.text-align-r {
  text-align: right;
}
// 单行文本溢出隐藏
.text-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 多文本溢出隐藏
.two-line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
// margin-top 0-40 内4的倍数 例:mt16 mt20 mt32 mt40
@for $i from 0 through 40 {
  @if $i % 4 == 0 {
    .m#{$i} {
      margin: #{$i}px;
    }
    .mt#{$i} {
      margin-top: #{$i}px;
    }
    .mb#{$i} {
      margin-bottom: #{$i}px;
    }
    .ml#{$i} {
      margin-left: #{$i}px;
    }
    .mr#{$i} {
      margin-right: #{$i}px;
    }
    .p#{$i} {
      padding: #{$i}px;
    }
    .pt#{$i} {
      padding-top: #{$i}px;
    }
    .pb#{$i} {
      padding-bottom: #{$i}px;
    }
    .pl#{$i} {
      padding-left: #{$i}px;
    }
    .pr#{$i} {
      padding-right: #{$i}px;
    }
    .h#{$i} {
      height: #{$i}px;
    }
    .lh#{$i} {
      line-height: #{$i}px;
    }
  }
}
